<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧校园 - 部门管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4a90e2;
            --success-color: #2ecc71;
            --danger-color: #e74c3c;
            --text-color: #2c3e50;
            --border-color: #dcdde1;
            --background-color: #f5f6fa;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--background-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
        }

        .dashboard {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* 统计卡片样式 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-card i {
            font-size: 2.5em;
            color: var(--primary-color);
            margin-right: 20px;
        }

        .stat-info h3 {
            margin: 0;
            font-size: 0.9em;
            color: #666;
        }

        .stat-info p {
            margin: 5px 0 0;
            font-size: 1.8em;
            font-weight: bold;
            color: var(--primary-color);
        }

        /* 操作栏样式 */
        .action-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            background: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .search-group {
            display: flex;
            gap: 10px;
            flex: 1;
            margin-right: 1rem;
        }

        .search-input {
            position: relative;
            flex: 1;
        }

        .search-input i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #666;
        }

        .search-input input {
            width: 100%;
            padding: 10px 10px 10px 35px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        /* 按钮样式 */
        .btn-primary, .btn-success, .btn-danger {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            color: white;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .btn-primary { background: var(--primary-color); }
        .btn-success { background: var(--success-color); }
        .btn-danger { background: var(--danger-color); }

        .btn:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        /* 表格样式 */
        .table-responsive {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
            margin-bottom: 20px;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th {
            background: #f8f9fa;
            padding: 15px;
            text-align: left;
            font-weight: 600;
            color: var(--text-color);
        }

        .table td {
            padding: 15px;
            border-top: 1px solid var(--border-color);
        }

        .table tr:hover {
            background-color: #f8f9fa;
        }

        /* 分页样式 */
        .pagination-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-top: 20px;
        }

        .btn-page {
            padding: 8px 15px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            background: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s ease;
        }

        .btn-page:hover {
            background: var(--primary-color);
            color: white;
        }

        /* 模态框样式 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
        }

        .modal-content {
            position: relative;
            background: white;
            width: 90%;
            max-width: 500px;
            margin: 50px auto;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { transform: translateY(-100px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: var(--text-color);
        }

        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
        }

        /* 加载动画 */
        .loading-spinner {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.8);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .action-bar {
                flex-direction: column;
                gap: 1rem;
            }

            .search-group {
                width: 100%;
                flex-direction: column;
            }

            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="dashboard">
    <!-- 顶部统计卡片 -->
    <div class="stats-container">
        <div class="stat-card">
            <i class="fas fa-building"></i>
            <div class="stat-info">
                <h3>总部门数</h3>
                <p id="totalDepartments">0</p>
            </div>
        </div>
        <div class="stat-card">
            <i class="fas fa-users"></i>
            <div class="stat-info">
                <h3>部门人数</h3>
                <p id="totalMembers">0</p>
            </div>
        </div>
        <div class="stat-card">
            <i class="fas fa-chart-line"></i>
            <div class="stat-info">
                <h3>本月新增</h3>
                <p id="monthlyNew">0</p>
            </div>
        </div>
    </div>

    <!-- 搜索和操作区 -->
    <div class="action-bar">
        <div class="search-group">
            <div class="search-input">
                <i class="fas fa-search"></i>
                <input type="text" id="searchID" placeholder="搜索部门ID">
            </div>
            <div class="search-input">
                <i class="fas fa-building"></i>
                <input type="text" id="searchName" placeholder="搜索部门名称">
            </div>
            <button id="searchBtn" class="btn-primary">
                <i class="fas fa-search"></i> 搜索
            </button>
        </div>
        <button id="addDepartmentBtn" class="btn-success">
            <i class="fas fa-plus"></i> 添加部门
        </button>
    </div>

    <!-- 数据表格 -->
    <div class="table-responsive">
        <table id="departmentTable" class="table">
            <thead>
            <tr>
                <th>部门ID</th>
                <th>部门名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 数据将通过JS动态加载 -->
            </tbody>
        </table>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-container">
        <button id="prevPage" class="btn-page">
            <i class="fas fa-chevron-left"></i> 上一页
        </button>
        <div class="page-info">
            第 <span id="currentPage">1</span> 页
        </div>
        <button id="nextPage" class="btn-page">
            下一页 <i class="fas fa-chevron-right"></i>
        </button>
    </div>
</div>

<!-- 模态框 -->
<div id="editModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">编辑部门信息</h3>
            <button class="close-btn" id="closeModal">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="editDepID">部门ID</label>
                <input type="text" id="editDepID" class="form-control">
            </div>
            <div class="form-group">
                <label for="editDepName">部门名称</label>
                <input type="text" id="editDepName" class="form-control">
            </div>
        </div>
        <div class="modal-footer">
            <button id="saveChanges" class="btn-primary">
                <i class="fas fa-save"></i> 保存
            </button>
            <button id="cancelEdit" class="btn-secondary">
                <i class="fas fa-times"></i> 取消
            </button>
        </div>
    </div>
</div>

<!-- 加载动画 -->
<div id="loadingSpinner" class="loading-spinner">
    <div class="spinner"></div>
</div>

<script>
    $(document).ready(function() {
        let page = 1; // 初始化页码
        let size = 5; // 每页显示的记录数
        let departmentsData = []; // 存储加载的部门数据
        let currentName = ""; // 当前搜索的部门名称
        let currentID = ""; // 当前搜索的部门ID

        // 加载部门数据
        function loadDepartments(page, size, name = "", id = "") {
            $.ajax({
                url: "/attend_war/admin/departments",
                method: "GET",
                dataType: "json",
                data: {
                    page: page,
                    size: size,
                    name: name,
                    id: id
                },
                success: function(data) {
                    departmentsData = data; // 保存部门数据
                    let tableContent = "";
                    $.each(data, function(index, department) {
                        tableContent += "<tr>";
                        tableContent += "<td>" + department.depID + "</td>";
                        tableContent += "<td>" + department.depName + "</td>";
                        tableContent += "<td>";
                        tableContent += '<button class="edit-btn" data-id="' + department.depID + '">编辑</button>';
                        tableContent += '<button class="delete-btn" data-id="' + department.depID + '">删除</button>';
                        tableContent += "</td>";
                        tableContent += "</tr>";
                    });
                    $("#departmentTable tbody").html(tableContent);
                    $("#currentPage").text(page);
                },
                error: function(jqXHR, textStatus) {
                    alert("获取部门数据失败: " + textStatus);
                }
            });
        }

        // 搜索按钮事件
        $("#searchBtn").click(function() {
            currentName = $("#searchName").val(); // 获取部门名称
            currentID = $("#searchID").val(); // 获取部门ID
            page = 1; // 重置页码
            loadDepartments(page, size, currentName, currentID);
        });

        // 添加部门按钮事件
        $("#addDepartmentBtn").click(function() {
            $("#modalTitle").text("添加部门信息");
            $("#editDepID").val(""); // 清空部门ID
            $("#editDepName").val(""); // 清空部门名称
            $("#editModal").data('original-id', null); // 清空原始ID
            $("#editModal").fadeIn(); // 显示模态框
        });

        // 编辑部门信息
        $(document).on('click', '.edit-btn', function() {
            const originalDepID = $(this).data('id'); // 获取原始部门ID
            const department = departmentsData.find(d => d.depID === originalDepID); // 查找部门

            if (department) {
                $("#editDepID").val(department.depID); // 设置输入框为原始部门ID
                $("#editDepName").val(department.depName); // 设置输入框为当前部门名称
                $("#editModal").data('original-id', originalDepID); // 储存原始ID到模态框数据中
                $("#modalTitle").text("编辑部门信息");
                $("#editModal").fadeIn(); // 显示编辑模态框
            }
        });

        $("#saveChanges").click(function() {
            const originalDepID = $("#editModal").data('original-id'); // 从模态框中获取原始部门ID
            const newDepID = $("#editDepID").val(); // 获取用户输入的新部门ID
            const newDepName = $("#editDepName").val(); // 获取用户输入的新部门名称

            // 判断是添加还是更新
            let ajaxMethod;
            let url;
            let departmentData;

            if (originalDepID) {
                // 更新
                ajaxMethod = "PUT";
                url = "/attend_war/admin/departments";
                departmentData = {
                    id: originalDepID, // 原始部门ID
                    depID: newDepID,
                    depName: newDepName
                };
            } else {
                // 添加
                ajaxMethod = "POST";
                url = "/attend_war/admin/departments";
                departmentData = {
                    depID: newDepID,
                    depName: newDepName
                };
            }

            // 发起 AJAX 请求
            $.ajax({
                url: url,
                method: ajaxMethod,
                contentType: "application/json",
                data: JSON.stringify(departmentData), // 将对象转换为 JSON 字符串
                success: function() {
                    alert(originalDepID ? "修改成功" : "添加成功"); // 显示成功消息
                    $("#editModal").fadeOut(); // 隐藏编辑模态框
                    loadDepartments(page, size, currentName, currentID); // 重新加载部门数据
                },
                error: function() {
                    alert(originalDepID ? "更新部门信息失败" : "添加部门失败");
                }
            });
        });

        // 取消编辑
        $("#cancelEdit").click(function() {
            $("#editModal").fadeOut(); // 隐藏编辑模态框
        });

        // 删除部门
        $(document).on('click', '.delete-btn', function() {
            const depID = $(this).data('id');

            if (confirm("确定要删除该部门吗？")) {
                $.ajax({
                    url: "/attend_war/admin/departments?depID=" + depID,
                    method: "DELETE",
                    success: function() {
                        alert('部门删除成功');
                        loadDepartments(page, size, currentName, currentID); // 重新加载部门数据
                    },
                    error: function() {
                        alert('删除部门失败');
                    }
                });
            }
        });

        // 分页按钮事件
        $("#prevPage").click(function() {
            if (page > 1) {
                page--;
                loadDepartments(page, size, currentName, currentID); // 使用当前搜索条件
            }
        });

        $("#nextPage").click(function() {
            page++;
            loadDepartments(page, size, currentName, currentID); // 使用当前搜索条件
        });

        // 首次加载部门数据
        loadDepartments(page, size);
    });
</script>

</body>
</html>